<template>
  <div class="box">
    <div class="header"><van-icon name="arrow-left" @click="$router.back" />我的讲座</div>
    <div class="list-container" @scroll="handleScroll">
      <van-card 
        v-for="item in visibleData" 
        :num="item.data" 
        :price="item.price" 
        :desc="`讲师：${item.name}`" 
        :title="item.title"
        :thumb="item.image" 
        :key="item.id">
          <template #tags>
          <van-tag plain type="primary">{{ item.subject }}</van-tag>
          <van-tag plain type="primary">{{ item.class }}</van-tag>
          </template>
          <template #footer>
            <van-button size="mini" @click="del(item.id)">删除</van-button>
            <van-button size="mini" @click="moveBy">观看</van-button>
          </template>
      </van-card>
      <van-loading size="24px" vertical v-if="isLoading">加载中...</van-loading>
      <p v-if="isLoading2">暂时没有更多了</p>

    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted,computed } from "vue"
import { getChair } from "@/api/course"
import type { Ref } from "vue"
import { showConfirmDialog } from 'vant'
import { useRouter } from "vue-router"
const router = useRouter()
interface Item {
  data: number
  price: number
  name: string
  title: string
  image: string
  id: string
  subject: string
  class: string
}
let dataList: Ref<Array<Item>> = ref([])
onMounted(async () => {
  dataList.value = (await getChair()).data
})

// 删除
function del(id: string) {
  showConfirmDialog({
  title: '删除弹框',
  message:
    '确定要删除吗？',
})
  .then(() => {
    dataList.value = dataList.value.filter(item => item.id !== id)
  })
  .catch(() => {

  })
}
// 观看 
function moveBy() {
  router.push('/my/evaluate')
}
let start: Ref<number> = ref(0)
let end: Ref<number> = ref(5)
let isLoading: Ref<boolean> = ref(false)
let isLoading2: Ref<boolean> = ref(false)
// 处理滚动事件

function handleScroll(e: Event) {
  const target = e.target as HTMLElement
  if (target.scrollHeight - target.scrollTop !== target.clientHeight) {
    if(end.value >= dataList.value.length) {
      end.value = dataList.value.length
    isLoading.value = false
    isLoading2.value = true
  }
  } else {
    isLoading.value = true
    setTimeout(() => {
      isLoading.value = false
      end.value += 2
    }, 1000)
  }
}

// 计算可见数据
let visibleData = computed(() => {
  const result = dataList.value.slice(start.value, end.value)
  return result
})
</script>

<style lang="scss" setup>
.header {
    .van-icon {
        position: fixed;
        left: 10px;
        top: 15px;
        font-size: 20px;
    }
}
p {
  text-align: center;
  margin: 10px auto;
  color: #ccc;
}
.list-container {
  height: 600px; 
  overflow-y: auto;
}

.van-dialog{
  p{
    text-align: center;
    font-size: 16px;
    color: #333;
  }
}
.van-card__price-currency {
  display: none;
}

.van-card__num::first-letter {
  color: transparent;
  font-size: 0;
}

.van-button {
  border-radius: 5px;
  background: #4bc4b1;
  color: #fff;
}
</style>
